<?php

if (!isset($_GET['id'])) {
  header("Location: complaints.php");
}

?>
<?php include ('includes/header.php');?>
<?php include ('includes/db_connect.php');?>

<?php

$sql = "SELECT * FROM complaints WHERE id = '".$_GET['id']."'";
$query = mysql_query($sql);
$data = mysql_fetch_array($query);

$thumb_width = "400";           // Width of thumbnail image
$thumb_height = "300";            // Height of thumbnail image

//You do not need to alter these functions
function getHeight($image) {
  $size = getimagesize($image);
  $height = $size[1];
  return $height;
}
//You do not need to alter these functions
function getWidth($image) {
  $size = getimagesize($image);
  $width = $size[0];
  return $width;
}

//Image Locations
$large_image_location = $data['photo'];
$thumb_image_location = $data['thumb'];

//Check to see if any images with the same name already exist
if (file_exists($large_image_location)){
  if(file_exists($thumb_image_location)){
    $thumb_photo_exists = "<img src=\"".$data['thumb']."?".strtotime(date('Y-m-d H:i:s'))."\" alt=\"Thumbnail Image\"/>";
  }else{
    $thumb_photo_exists = "";
  }
  $large_photo_exists = "<img src=\"".$data['photo']."?".strtotime(date('Y-m-d H:i:s'))."\" alt=\"Large Image\" id='thumbnail'/>";
} else {
  $large_photo_exists = "";
  $thumb_photo_exists = "";
}

?>

<div class="row">
  <div class="col-lg-12">
    <h1 class="page-header bg-primary text-center" style="text-shadow: 2px 2px 3px black; font-family:optimum">Guest Picture</h1>
  </div>
  <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="row">
          <div class="col-lg-12">
            <?php

            if(strlen($large_photo_exists)>0 && strlen($thumb_photo_exists)>0){
              echo $thumb_photo_exists;
              //Clear the time stamp session and user file extension
              $_SESSION['random_key']= "";
              $_SESSION['user_file_ext']= "";
            }else{
              if(strlen($large_photo_exists)>0){?>
              <?php if (strlen($thumb_photo_exists)>0): ?>
                <h2>Edit Thumbnail</h2>
                <?php echo $thumb_photo_exists; ?>
              <?php else: ?>
                <h2 style="font-family:optimum">Create Thumbnail <br><i style="font-size:12px; font-family:optimum">(drag the first picture to make selection)</i></h2>
              <?php endif ?>
              <div align="center">
                <img src="<?php echo $data['photo'];?>?<?php echo strtotime(date('Y-m-d H:i:s')); ?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
                <div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
                  <img src="<?php echo $data['photo'];?>?<?php echo strtotime(date('Y-m-d H:i:s')); ?>" style="position: relative;" alt="Thumbnail Preview" />
                </div>
                <br style="clear:both;"/>
                <form name="thumbnail" action="image_act.php" method="post">
                  <input type="hidden" name="x1" value="" id="x1" />
                  <input type="hidden" name="y1" value="" id="y1" />
                  <input type="hidden" name="x2" value="" id="x2" />
                  <input type="hidden" name="y2" value="" id="y2" />
                  <input type="hidden" name="w" value="" id="w" />
                  <input type="hidden" name="h" value="" id="h" />
                  <input type="hidden" name="id" value="<?php echo $_GET['id']; ?>">
                  <br>
                  <input type="submit" class="btn btn-primary" name="upload_thumbnail" value="Done" id="save_thumb" />
                </form>
              </div>
              <hr />
              <?php } ?>
            <?php } ?>

            <h2>Upload Photo</h2>
            <form name="photo" enctype="multipart/form-data" action="image_act.php" method="post">
              <input type="hidden" name="id" value="<?php echo $_GET['id']; ?>">
              <input type="file" name="image" size="30" />
              <br>

              <input class="btn btn-primary" type="submit" name="upload" value="Upload" />
              <a href="complaints_act.php?act=7&id=<?php echo $_GET['id']; ?>" class="btn btn-danger">No Picture</a>
              <a href="complaints.php" class="btn btn-danger">Cancel</a>
            </form>
          </div>
          <!-- /.col-lg-6 (nested) -->
        </div>
        <!-- /.row (nested) -->
      </div>
      <!-- /.panel-body -->
    </div>
    <!-- /.panel -->
  </div>
  <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

<?php include ('includes/footer.php');?>

    <script type="text/javascript" src="js/jquery-pack.js"></script>
    <script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
<?php
//Only display the javacript if an image has been uploaded
if(strlen($large_photo_exists)>0){
  $current_large_image_width = getWidth($large_image_location);
  $current_large_image_height = getHeight($large_image_location);?>
  <script type="text/javascript">
    function preview(img, selection) {
      var scaleX = <?php echo $thumb_width;?> / selection.width;
      var scaleY = <?php echo $thumb_height;?> / selection.height;

      $('#thumbnail + div > img').css({
        width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px',
        height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
      });
      $('#x1').val(selection.x1);
      $('#y1').val(selection.y1);
      $('#x2').val(selection.x2);
      $('#y2').val(selection.y2);
      $('#w').val(selection.width);
      $('#h').val(selection.height);
    }

    $(document).ready(function () {
      $('#save_thumb').click(function() {
        var x1 = $('#x1').val();
        var y1 = $('#y1').val();
        var x2 = $('#x2').val();
        var y2 = $('#y2').val();
        var w = $('#w').val();
        var h = $('#h').val();
        if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
          alert("You must make a selection first");
          return false;
        }else{
          return true;
        }
      });
    });

    $(window).load(function () {
      $('#thumbnail').imgAreaSelect({ aspectRatio: '4:3', onSelectChange: preview });
    });

  </script>
  <?php }?>